import React, { Component } from 'react'
import {connect} from 'react-redux';
import { setShowCatalogMenu } from '../../../actions/home';
import {bindActionCreators} from 'redux'

var Icon = require('antd/lib/icon');
var Input = require('antd/lib/input');

class Sort extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showType: false,//下拉排序是否展示类型
            showCatalog: false,//catalog侧边抽屉是否展示
            priceLow: '',//高地价
            priceHight: '',//高地价
            categoryChoose: this.props.categoryId,
            sort: 'Sort by'
        }
    }

    showType = () => {
        this.setState({
            showType: !this.state.showType
        })
    };

    hideType = () => {
        this.setState({
            showType: false,
            showCatalog: false
        })
        this.props.setShowCatalogMenu(false);
    };

    showCatalog = () => {
        this.setState({
            showCatalog: true,
            showType: false
        });
        this.props.setShowCatalogMenu(true);
    };

    chooseCatalog = (catalog,index) => {
        if(JSON.stringify(this.state.categoryChoose).indexOf(catalog.categoryId)>0) {
            for(let i in this.state.categoryChoose) {
                if(this.state.categoryChoose[i]==catalog.categoryId) {
                    let ary = this.state.categoryChoose
                    ary.splice(i,1)
                    this.setState({
                        categoryChoose: ary
                    })
                }
            }
        }else {
            let arr = this.state.categoryChoose
            arr.push(catalog.categoryId)
            this.setState({
                categoryChoose: arr
            })
        }
    };

    clear = () => {
        this.setState({
            priceHight: '',
            priceLow: '',
            categoryChoose: [],
        })
    };

    done = () => {
        this.setState({
            showCatalog: false
        });
        this.props.setShowCatalogMenu(false);
        this.props.search(this.state,false);
        this.props.catalogChange(this.state.categoryChoose)
    };

    changeType = (val) => {
        this.hideType();
        this.props.setOrderBy(val);
        switch (val) {
            case 'salesHigh':
                this.setState({
                    sort: 'Sales Volume:High to Low'
                });
                break;
            case 'newest':
                this.setState({
                    sort: 'NEW ARRIVALS'
                });
                break;
            case 'priceLow':
                this.setState({
                    sort: 'Price:Low to High'
                });
                break;
            case 'priceHigh':
                this.setState({
                    sort: 'Price:High to Low'
                });
                break;
            default:
                this.setState({
                    sort: 'Sort by'
                })
        }
    };

    onChangePriceLow = (event) => {
        this.setState({priceLow: event.target.value.replace(/[^\-?\d.]/g,'')});
    };
    onChangePriceHeight = (event) => {
        this.setState({priceHight: event.target.value.replace(/[^\-?\d.]/g,'')});
    };
    blurHeight = (e) => {
        if(this.state.priceLow!='') {
            if(parseFloat(e.target.value)<parseFloat(this.state.priceLow)) {
                this.setState({
                    priceHight: this.state.priceLow
                });
            }
        }
    }
    blurLow = (e) => {
        if(this.state.priceHight!='') {
            if(parseFloat(e.target.value)>parseFloat(this.state.priceHight)) {
                this.setState({
                    priceLow: this.state.priceHight
                });
            }
        }
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.categoryId) {
            if(JSON.stringify(this.props.categoryId)!=JSON.stringify(nextProps.categoryId)){
                this.setState({
                    categoryChoose: nextProps.categoryId
                })
            }
        }else {
            this.setState({
                categoryChoose: []
            })
        }
    }
    render() {
        return (
            <div className='sort'>
                <div className='sort-contain'>
                    {
                        this.props.searchIn ?
                            <div className='search'>
                                <span>SEARCH</span>
                                <span className='name'>"{this.props.searchIn}"</span>
                            </div>:''
                    }

                    <div className='sort-type'>
                        <div className='sort-by' onClick={this.showType}>
                            <span>{this.state.sort}</span>
                            <Icon type={this.state.showType ? 'caret-up' : 'caret-down'}/>
                        </div>
                        <div className='list-botton'>
                            {this.props.listType == 1 ?
                                <Icon
                                    onClick={()=>this.props.changeListType()}
                                    type="appstore-o" />:
                                <Icon
                                    onClick={()=>this.props.changeListType()}
                                    type="bars" />
                            }
                        </div>
                        <div className='catalog' onClick={this.showCatalog}>
                            <Icon type="filter" />
                            <span>CATALOG</span>
                        </div>

                        <div className='catalog-mask' onClick={this.hideType}  style={this.state.showCatalog ? {display:'block'} : {display:'none'}}></div>
                        <div className='catalog-show' style={this.state.showCatalog ? (this.props.home.isFb? {width: '50%'} : {width:'80%'}) : {}}>
                            <div className='catalog-contain'>
                                <div className='part'>
                                    <div className='title'>
                                        CATEGORIES
                                    </div>
                                    <div className='content'>
                                        {this.props.catalogListData?this.props.catalogListData.map((catalog,index)=>(
                                            <span
                                                key={index}
                                                onClick={()=>this.chooseCatalog(catalog,index)}
                                                className={
                                                    JSON.stringify(this.state.categoryChoose).indexOf(catalog.categoryId)>0
                                                        ?'group group-click':'group'}>
																			{catalog.title}
																		</span>)):null
                                        }
                                    </div>
                                </div>
                                <div className='part'>
                                    <div className='title'>PRICE</div>
                                    <div className='content'>
                                        <Input
                                            onBlur={this.blurLow}
                                            onChange={this.onChangePriceLow.bind(this)}
                                            value={this.state.priceLow}
                                            prefix={<span>$</span>}/>
                                        <span className="price-span"></span>
                                        <Input
                                            onBlur={this.blurHeight}
                                            onChange={this.onChangePriceHeight.bind(this)}
                                            value={this.state.priceHight}
                                            prefix={<span>$</span>}/>
                                    </div>
                                </div>
                                <div className='botton' style={this.props.home.isFb? {width: '100%'} : {width:'100%'}}>
                                    <span className='clear' onClick={this.clear}>Clear</span>
                                    <span className='done' onClick={this.done}>Done</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='title-notice'>
                    <div className='catalog-mask' onClick={this.hideType}  style={this.state.showType ? {display:'block'} : {display:'none'}}></div>
                    <div >
                        <div className='type' style={this.state.showType ? {opacity:'1',display:'block'} : {opacity:'0',display:'none'}}>
                            <span onClick={()=>this.changeType('salesHigh')}>Sales Volume:High to Low</span>
                            <span onClick={()=>this.changeType('newest')}>NEW ARRIVALS</span>
                            <span onClick={()=>this.changeType('priceLow')}>Price:Low to High</span>
                            <span onClick={()=>this.changeType('priceHigh')}>Price:High to Low</span>
                        </div>
                        <div style={this.state.showType ? {display:'block'} : {display:'none'}} className='sort-mask' onClick={this.hideType}></div>
                    </div>
                </div>
            </div>
        )
    }
}

const mapStateToProps = ({home}) => ({
    home
});

const mapDispatchToProps = (dispatch) => {
    return {
        setShowCatalogMenu: bindActionCreators(setShowCatalogMenu, dispatch),
    }
};
export default connect(mapStateToProps, mapDispatchToProps)(Sort)
